<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>product-details</title>

    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="./css/common/reset.css">
    <link rel="stylesheet" href="./css/common/common.css">
    <link rel="stylesheet" href="./css/common/header.css">
    <link rel="stylesheet" href="./css/common/footer.css">

    <link rel="stylesheet" href="./css/product-details.css">

    <script src="./lib/jquery.js"></script>
    <script src="./js/product-details.js"></script>
    <script src="./js/user-stro.js"></script>

    <style>
        body,
        html {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <!-- 头部开始 -->
    <header class="header clearfix">

        <!-- 顶部 -->
        <div class="top">
            <div class="wrapper">
                <span>
                    乐购www.legou.com
                </span>
                <span class="show-user">
                    欢迎光临乐购 &nbsp; 请 <span><a href="./login.html">登录 </a> | <a href="./register.html">注册</a></span>
                </span>
            </div>
        </div>

        <!-- 导航栏 -->
        <nav class="nav-t">
            <section class="nav wrapper">

                <section class="logo">

                </section>
                <div class="qjd">
                    <div>
                        <img src="./img/大疆logo.jpg" alt="">
                        <span class="f14">大疆官方旗舰店</span>
                    </div>
                    <div>
                        <p class="cc">DJI大疆官方旗舰店</p>
                        <h4 class="box-y">品牌直销</h4>
                        <h5 class="boxr-b">收藏本店</h5>
                    </div>
                </div>
                <section class="header-desc">
                    <div class="top-t clearfix">
                        <div class="car">
                            <b>购物车</b>
                            <span>0</span>
                        </div>
                        <div class="search">
                            <input type="text" placeholder="请输入搜索的商品名字">
                            <button></button>
                        </div>
                    </div>
                </section>
            </section>

        </nav>


    </header>
    <div class="clear"></div>
    <!-- 头部结束 -->

    <!-- banner 开始 -->
    <div id="d-banner">
        <img src="./img/灵眸.jpg" alt="">
    </div>
    <!-- banner 结束 -->


    <!-- 产品详情开始 -->
    <div class="product-details wrapper">
        <div class="pro-details-left">
            <div class="pro-ltop">
                <div class="pro-ltop-img">
                    <section class="showordis" id="motai"></section>
                    <img src="./img/无人机1.jpg" alt="">
                    <div class="showordis" id="motai-show">
                        <img src="./img/无人机1.jpg" alt="">
                    </div>
                </div>
            </div>


            <div class="pro-lbom">
                <div id="boxshwo"></div>
                <div>
                    <img src="./img/无人机3.jpg" alt="">
                </div>
                <div>
                    <img src="./img/无人机1.jpg" alt="">
                </div>
                <div>
                    <img src="./img/无人机0.jpg" alt="">
                </div>
                <div>
                    <img src="./img/无人机2.jpg" alt="">
                </div>
            </div>
        </div>

        <div class="pro-details-right">
            <div class="detail-tips">
                <h1>【新品首发】DJI 大疆RoboMaster S1 机甲大师 S1专业教育机器人</h1>
                <p>寓教于乐，玩出名堂</p>
            </div>

            <div>
                <img src="./img/4-详情页_03.jpg" alt="">
            </div>
            <!-- 运费 -->
            <div class="yunfei">
                <p>运费: &nbsp;&nbsp;&nbsp; 江苏苏州&nbsp; 至&nbsp; 成都&nbsp; &nbsp; 快递: 0.00</p>
                <div>
                    <span>月销量 <b>2871</b></span>
                    <span>累计评价 <b>10915</b></span>
                    <span>送积分 <b>300</b> 起</span>
                </div>
            </div>
            <!-- 颜色 -->
            <div class="color-c">
                <span>颜色分类:</span>
                <div class="peizhi boxactive">机甲大师 S1RoboMaster S1套餐一</div>
                <div class="peizhi">机甲大师 S1RoboMaster S1套餐二</div>
                <div class="peizhi">机甲大师 S1RoboMaster S1套餐三"</div>
                <div class="peizhi">机甲大师 S1RoboMaster S1单机</div>
                <div class="peizhi2">机甲大师全套配件</div>
                <div class="peizhi2">机甲大师 S2 预定</div>
            </div>

            <!-- 数量 -->

            <div class="pro-count">
                <span>数量:</span>
                <!-- 左边 -->
                <div class="count">
                    1
                </div>
                <!-- 右边 -->
                <div class="c-add">
                    <div class="count-add" id="add"><img src="./img/上箭头.png" alt=""></div>
                    <div class="count-add" id="reduce"><img src="./img/上箭头.png" alt=""></div>
                </div>
            </div>

            <!-- 分期 -->
            <div class="pro-aging">
                <span>花呗分期:</span>
                <div>
                    ¥1166.33*3期
                    <p>(0)手续费</p>
                </div>

                <div>
                    ¥583.16*3期
                    <p>(0)手续费</p>
                </div>
                <div>
                    ¥313.44*12期
                    <p>(0)手续费</p>
                </div>
            </div>

            <div class="pro-use">
                <div class="buy">立即购买</div>
                <div class="addcar">加入购物车</div>
            </div>

            <p class="pro-s-j"><span>收藏商品</span> &nbsp; <span>举报</span></p>

            <p class="pro-cl"><span>服务承若:</span>
                <span>正品保证</span>
                <span>急速退款</span>
                <span>赠运费险</span>
                <span>七天无理由退换</span>
                <span>支付方式</span>
            </p>
        </div>


    </div>
    <!-- 产品详情结束 -->




    <!-- 产品细节 开始-->
    <div class="pro-show wrapper">
        <div class="pro-show-left">

            <div class="pro-show-top">
                <div id="pro-des">产品详情</div>
                <div id="pro-com" class="active">累计评价 10915</div>
            </div>


            <!-- 产品介绍开始 -->
            <div class="pro-inter">
                <img src="./img/wrj4.png" alt="">
                <img src="./img/wrj6.jpg" alt="">
                <img src="./img/wrj7.jpg" alt="">

            </div>
            <!-- 产品介绍结束 -->

            <!-- 点击切换 -->

            <!-- 产品评价开始 -->
            <div class="pro-comment">

                <div class="fenshu">
                    <div class="pro-pf">
                        <span>与描述相符</span>

                        <div>
                            <span>4.9</span>
                            <img src="./img/xx.png" alt="">
                        </div>
                    </div>


                    <h4 class="good-com">
                        <span>好评率98% </span>
                        <p><span></span></p>
                    </h4>
                </div>

                <div class="pro-select">

                    <div class="select-l">
                        <input type="radio" name="sel" id="" checked>
                        全选
                        <input type="radio" name="sel" id="">
                        追加(12)
                        <input type="radio" name="sel" id="">
                        图片(93)
                    </div>

                    <div class="select-r" .>
                        <select>
                            <option value="">按默认</option>
                            <option value="">按价格</option>
                            <option value="">按品牌</option>
                        </select>
                    </div>

                </div>


                <div class="pro-coms">
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>
                    <div class="pro-com">
                        <div class="user-com">
                            <p>挺不错的，机甲大师对战T-34-85</p>

                            <div>
                                <img src="./img/comment0.jpg" alt="">
                                <img src="./img/comment2.jpg" alt="">
                            </div>

                            <span>2020-5-12 &nbsp;&nbsp; 13:55:30</span>


                            <h5>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </h5>
                        </div>
                        <div class="user-c">
                            t***1(匿名)
                        </div>

                    </div>


                    <!-- 页码 -->
                    <div class="page">
                        <ul>
                            <li>上一页</li>
                            <li class="active-page">1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>...</li>
                            <li>下一页</li>
                            <li>末页</li>
                        </ul>
                    </div>



                </div>

            </div>
            <!-- 产品评价结束 -->

        </div>

        <div class="pro-show-right">

            <div>
                猜你喜欢
            </div>

            <ul>
                <li><img src="./img/dj0.jpg" alt=""></li>
                <li><img src="./img/dj1.jpg" alt=""></li>
                <li><img src="./img/dj2.jpg" alt=""></li>
                <li><img src="./img/dj3.jpg" alt=""></li>

            </ul>
        </div>
    </div>
    <!-- 产品细节 结束-->


    <!-- 页脚开始 -->
    <footer>

        <section class="footer-fuwu wrapper">
            <ul>
                <li>
                    <img src=" ./img/zp.jpg" alt="">
                    <div>
                        <span>
                            正品保障
                        </span>
                        <b>
                            正品行货 放心选购
                        </b>
                    </div>

                </li>
                <li>
                    <img src=" ./img/yf.jpg" alt="">
                    <div>
                        <span>
                            满86包邮
                        </span>
                        <b>
                            满86元 免运费
                        </b>
                    </div>

                </li>
                <li>
                    <img src=" ./img/sh.jpg" alt="">

                    <div>
                        <span>
                            售后无忧
                        </span>
                        <b>
                            7天无理由退款
                        </b>
                    </div>

                </li>
                <li>
                    <img src=" ./img/zs.jpg" alt="">

                    <div>
                        <span>
                            准时中送
                        </span>
                        <b>
                            收获时间由你做主
                        </b>
                    </div>

                </li>
            </ul>
        </section>

        <section class="footer-des wrapper">
            <ul>
                <li>
                    <ol>
                        <li>
                            <a href="">新手入门</a>

                        </li>
                        <li>
                            <a href="">购物流程</a>

                        </li>
                        <li>
                            <a href="">会员制度</a>

                        </li>
                        <li>
                            <a href="">订单查询</a>
                        </li>
                        <li>
                            <a href="">服务协议及隐私说明</a>
                        </li>
                        <li>
                            <a href="">网站地图</a>
                        </li>
                    </ol>
                </li>


                <li>
                    <ol>
                        <li>
                            <a href="">支付方式</a>

                        </li>
                        <li>
                            <a href="">货到付款</a>

                        </li>
                        <li>
                            <a href="">网上支付</a>

                        </li>
                        <li>
                            <a href="">礼品卡支付</a>
                        </li>
                        <li>
                            <a href="">其它支付</a>
                        </li>
                    </ol>
                </li>


                <li>
                    <ol>
                        <li>
                            <a href="">配送服务</a>

                        </li>
                        <li>
                            <a href="">配送进度查询</a>

                        </li>
                        <li>
                            <a href="">商品验货与签收</a>

                        </li>
                    </ol>
                </li>


                <li>
                    <ol>
                        <li>
                            <a href=""> 相关规则</a>

                        </li>
                        <li>
                            <a href="">平台规则</a>

                        </li>
                        <li>
                            <a href="">退换货政策</a>
                        </li>
                        <li>
                            <a href="">发票制度</a>
                        </li>

                        <li>
                            <a href="">帮助中心</a>
                        </li>

                    </ol>
                </li>

                <li class="yhj">
                    <p>APP更优惠</p>

                    <img src=" ./img/qryhd.png" alt="">


                </li>

                <li class="yhj">
                    <p>加微信查订单</p>

                    <img src=" ./img/qryhd.png" alt="">

                </li>

            </ul>
        </section>

        <section class="footer-b">
            <div class="wrapper">

                <div>
                    <p>
                        沪ICP备XXXXXXXXX号 | 经营证照 │ 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话:XX-XXXX | 沪B2-X
                    </p>
                    <p>
                        沪公网安备XXXXXXXXX号 │ 友情链接 │ 出版物经营许可证 │ 增值电信业务经营许可证
                    </p>
                </div>

                <div class="links">
                    <img src=" ./img/wz2.png" alt="">
                    <img src=" ./img/wz1.jpg" alt="">
                    <img src=" ./img/wz3.jpg" alt="">
                    <img src=" ./img/wz4.jpg" alt="">
                    <img src=" ./img/wz5.jpg" alt="">
                    <img src=" ./img/wz1.jpg" alt="">
                </div>
            </div>
        </section>

    </footer>
    <!-- 页脚开始 -->


</body>

</html>